<template>
  <view class="nav-custom">
    <shopro-navbar :background="bg" :is-back="false" :placeholder="false">
      <view slot="content" class="title-slot" :class="max ? 'more' : 'more'">
        <view class="title" :class="max ? 'move' : ''">
          {{ title }}
        </view>
      </view>
      <view
        slot="left"
        class="left-slot"
        hover-class="hover-bubble"
        @tap="jumpPage"
      >
        <img class="bg-left" src="../img/1.png" alt="" />
        <img class="back-icon" src="../img/back-0.png" alt="" />
      </view>
    </shopro-navbar>
  </view>
</template>
<script>
/** 自定义头部
 * @property {Object} back 指定 返回 某一页  path query
 * @property {String} title 页面标题
 */
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  props: {
    back: {
      type: Object,
      default: () => null,
    },
    title: {
      type: String,
      default: '一番赏',
    },
  },
  data() {
    return {};
  },
  // 计算属性 适配者模式
  computed: {
    max() {
      return this.title.length >= 15 ? true : false;
    },
    bg() {
      return {
        'background-image': `-webkit-linear-gradient(top, rgba(0,0,0,0.4), transparent);`,
      };
    },
  },
  // 数据监听
  watch: {},
  methods: {
    // 返回上一页
    jumpPage() {
      let pageList = getCurrentPages();
      if (pageList.length > 1) {
        if (this.back) {
          this.$Router.push({
            path: this.back.path,
            query: this.back.query,
          });
        } else {
          uni.navigateBack({
            delta: 1,
          });
        }
      } else {
        this.$Router.replaceAll('/pages/index/index');
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.nav-custom {
  animation: fade 1s linear 0s 1 normal none;
}
.title-slot.more {
  font-size: 30rpx;
}
.title-slot {
  margin: 0 auto;
  padding: 0 20rpx;
  width: 94%;
  text-align: center;
  font-weight: 600;
  color: #fff;
  font-size: 40rpx;
  overflow: hidden;
  .title.move {
    animation: slide-in-bottom 7s linear 2s infinite alternate none;
  }
  .title {
    display: inline-block;
    max-width: none;
  }
}
.left-slot {
  position: relative;
  top: 2rpx;
  width: 80rpx;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  .bg-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 80rpx;
    height: 80rpx;
  }
  .back-icon {
    width: 40rpx;
    height: 36rpx;
  }
}

@keyframes slide-in-bottom {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
</style>
